<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>姓名案例_watch实现</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
				computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
				两个重要的小原则：
							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
							2.所有不被Vue所管理的函数（就是作为参数的函数：定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
								这样this的指向才是vm 或 组件实例对象。
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"> <br /><br />
		全名：<span>{{fullName}}</span> <br /><br />
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			firstName: '张',
			lastName: '三',
			fullName: '张-三'
		},
		watch: {
			firstName: {
				handler(newValue) {
					//如果不用箭头函数没由调用者那么this就是全局window：因为这时这个回调函数不是vue的，是定时任务的就是window。箭头函数本身没有this，
					//它会继承外部作用域中的 this，外部就是 handler 函数，而这个函数的 this 正好就是 Vue 实例
					//
					//window不能访问vue中的data属性
					//监测可以用异步代码，计算属性不行
					setTimeout(() => {
						console.log("姓改了");
						this.fullName = newValue + '-' + this.lastName;
					}, 1000);
				}
			},
			lastName: {
				handler(newValue) {
					console.log("名改了");
					this.fullName = this.firstName + '-' + newValue;
				}
			}
		}
		// firstName(val){
		// 	setTimeout(()=>{
		// 		console.log(this)
		// 		this.fullName = val + '-' + this.lastName
		// 	},1000);
		// },
		// lastName(val){
		// 	this.fullName = this.firstName + '-' + val
		// }
		// }
	})
</script>

</html>